<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>积分夺宝</title>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/api.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/aui.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/swiper.min.css"/>
</head>
<style>
  html, body {
    height: 100%;
    background-size: 100%;
    margin: 0;
    padding: 0;
  }

  header {
    overflow: hidden;
    position: relative;
    height: 16.475rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: none
  }

  header img {
    width: 100%;
    height: 100%;
  }

  header .right {
    margin-right: 0;
  }

  .right img {
    width: 0.85rem;
    height: 0.85rem;
  }

  .dian {
    position: absolute;
    top: 14.825rem;
    left: 7.3rem;
    display: flex;
    justify-content: space-between;
  }

  .dian span {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: white;
    margin-right: 0.6rem;
  }

  .dian .span1 {
    background: #E5E5E5;
  }

  .duobao {
    background: #E13952;
    padding-left: 0.825rem;
  }

  .top {
    display: flex;
    justify-content: space-between;
  }

  .top span {
    font-size: 1.2rem;
    color: white;
    font-weight: 500;
    margin-top: 0.95rem;
  }

  .bao {
    width: 3.95rem;
    height: 3.95rem;
    border: 2px solid #FFD22D;
    background: #E13952;
    border-radius: 50%;
    font-size: 1.2rem;
    color: #FDDC75;
    z-index: 999999999999999999999999999999999;
    text-align: center;
    padding-top: 1rem;
    margin-top: -1.4rem;
  }

  .info {
    width: 6.875rem;
    z-index: 999999999999999999;
    height: 6.7rem;
    background: url('/static/admin/jingtaiwu/juxing11.png') no-repeat;
    background-size: 100%;
    position: absolute;
    right: -1rem;
    top: 4.675rem;
  }

  .renwu {
    display: flex;
    margin-left: 0.65rem;
    margin-top: 0.15rem;
  }

  .ji {
    font-size: 0.7rem;
    color: #9F2B30;
    font-weight: 500;
    margin-left: 2.3rem;
    margin-top: 1.2rem;
  }

  .renwu img {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
  }

  .name, .gongxi {
    font-size: 0.45rem;
    color: #ffffff;
    font-weight: 500;
  }

  .right1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 0.1rem;
  }

  .canjia {
    font-size: 0.7rem;
    color: white;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
  }

  .kaijiang {
    margin-top: 0.675rem;
  }

  .jieshu {
    width: 5.025rem;
    height: 1.75rem;
    background: url('/static/admin/jingtaiwu/jiesu2.png') no-repeat;
    background-size: 100%;
    margin-bottom: 0;
  }

  .jingao {
    font-size: 0.6rem;
    color: #F85959;
    font-weight: 500;
    margin-left: 1.025rem;
  }

  .time {
    font-size: 0.5rem;
    font-weight: 500;
    margin-left: 0.8rem;
    margin-bottom: 0.3rem;
  }

  .time span {
    width: 0.65rem;
    height: 0.65rem;
    background: #5C3115;
    border-radius: 2px;
    text-align: center;

  }

  .time .maohao {
    width: 0rem;
    height: 0rem;
    background: none;
    margin-left: -0.1rem;
    margin-right: 0.1rem;
  }

  .guize {
    background: white;
    padding-top: 0.475rem;
    padding-left: 0.8rem;
    padding-bottom: 0.3rem;
    font-size: 0.7rem;
    color: #454647;
    font-weight: 500;
    /* margin-bottom:  */
  }

  .gui1 {
    line-height: 20px;
    margin-bottom: 0.425rem;
  }

  .gui2 {
    margin-right: 0.375rem;
  }

  .lunbao {
    position: relative;
  }

  .dian1 {
    position: absolute;
    bottom: -3.5rem;
    left: 7.3rem;
    display: flex;
    justify-content: space-between;
  }

  .dian1 span {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: white;
    margin-right: 0.6rem;
  }

  .dian1 .span1 {
    background: #E5E5E5;
  }

  .jianjie {
    padding: 0 0.775rem;
    margin-top: 0.7rem;
    font-size: 0.7rem;
    color: #454647;
    font-weight: 500;
  }

  .jianjie img {
    width: 100%;
  }

  .banner {
    height: 2.773rem;
    display: flex;
    align-items: center;
  }

  .top1 {
    position: fixed;
    width: 100%;
    top: 2rem;
    left: 0;
    z-index: 99999999999;
    display: flex;
    align-items: center;
  }

  .top1 .left {
    width: 24px;
    height: 24px;
    background: #cccccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .top1 .right {
    width: 24px;
    height: 24px;
    background: #cccccc;
    border-radius: 50%;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    background: white;
    box-shadow: 0 -0.02rem 0.1rem 0 rgba(222, 228, 234, 0.8);
    padding: 0 15px;
  }

  .fixed-bottom img {
    width: 34px;
    height: 34px;
  }

  .fixed-bottom .info1 {
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 34px;
    margin-left: 10px;
  }

  .info1 .info-top {
    color: #3B3B3B;
    font-size: 13px;
  }

  .info1 .info-bottom {
    color: #989898;
    font-size: 11px;
  }

  .btn-download {
    width: 70px;
    height: 29px;
    text-align: center;
    line-height: 29px;
    background: #F96B47;
    border-radius: 14.5px;
    color: #FFFFFF;
    font-size: 12px;
  }
</style>
<body>
<div id="app" v-cloak="">
  <header id="header" style="margin-top: 0">
    <div class="swiper-container swiper-container1" style="height: 16.475rem">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="banner in p_banner">
          <img :src="banner  | ossImgSuffix(3)">
        </div>
      </div>
    </div>
    <div class="info">
      <span class="ji">积分中奖</span>
      <div class="swiper-container swiper-container2 banner">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="info in winningInformation">
            <div class="renwu">
              <img :src="info.user_image | ossImgSuffix(3)">
              <div class="right1">
                <span class="name">{{info.user_username}}</span>
                <span class="gongxi aui-ellipsis-1">{{info.w_info}}！</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="duobao">
    <div class="top">
      <span>{{Detail.d_join_integral}}积分</span>
      <div class="bao" @click="duobao()">夺宝</div>
    </div>
    <div class="canjia">
      <span class="kaijiang">{{Detail.d_join}} 人已参加   还差{{Detail.d_join_num - Detail.d_join}}人即可开奖</span>
      <div class="jieshu">
        <div v-if="Detail.d_status==5||Detail.d_status==7" style="text-align: center;font-size: 0.6rem;color: #F85959;font-weight: 500;padding-top:0.5rem">已结束</div>
        <template v-else>
          <span class="jingao">距结束仅剩</span>
          <div class="time">
            <span v-if="Detail.d_start_time">{{Detail.d_start_time.hours}}</span>
            <span class="maohao">:</span>
            <span v-if="Detail.d_start_time">{{Detail.d_start_time.minutes}}</span>
            <span class="maohao">:</span>
            <span v-if="Detail.d_start_time">{{Detail.d_start_time.seconds}}</span>

          </div>
        </template>
      </div>
    </div>
  </div>
  <div class="guize">
    <p class="gui1" v-if="Detail.d_type==1">
      1.积分购买抽奖商品，获取抽奖码。<br>2.达到开奖人数立即开奖，并公布中奖码，若和您的抽奖码一致则中奖，若到达时间，未达到参与人数要求，返还积分。<br>3.中奖后将直接生成奖品订单，请到个人中心完成领奖流程。
    </p>
    <p class="gui1" v-if="Detail.d_type==2">
      1.积分购买抽奖商品，获取抽奖码。<br>2.达到开奖人数，将在时间截止时公布中奖码，若和您的抽奖码一致则中奖，若到达时间，未达到参与人数要求，返还积分。<br>3.中奖后将直接生成奖品订单，请到个人中心完成领奖流程。
    </p>
  </div>
  <div class="jianjie">
    <div v-html="Detail.p_content"></div>
  </div>
  <div class="fixed-bottom">
    <img src="https://jintianjifen.oss-cn-shanghai.aliyuncs.com/f53953806ed6e7296fc76890aff4b7c9.jpg" alt="">
    <div class="info1">
      <div class="info-top">支分宝</div>
      <div class="info-bottom">支分宝享品质生活</div>
    </div>
    <div class="btn-download" onclick="tz()">立即下载</div>
  </div>
</div>
</body>
<script type="text/javascript" src="/static/admin/jingtaiwu/api.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/utils.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/swiper.min.js"></script>
<script src="/static/admin/jingtaiwu/vue.min.js"></script>
<script src="/static/admin/jingtaiwu/vue-extend.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/common1.js"></script>
<script>
  var vm;
  window.onload = function () {
    vm = new Vue({
      el: '#app',
      data: {
        winningInformation: {},
        BannerList: {},
        number: "",
        Detail: {},
        hours: "",
        seconds: "",
        minutes: "",
        id: "",
        t1: "",
        p_banner: {}
      },
      methods: {
        checkTime: function (i) { //将0-9的数字前面加上0，例1变为01
          i = Number(i);
          if (i < 10) {
            i = "0" + i;
          }
          return i;
        },
        duobao: function () {

        },
        timeShow: function () {
          var _self = this;
          var seconds = '';
          var minutes = "";
          var hours = "";
          if (typeof (_self.Detail.d_start_time.seconds) != "number") {
            seconds = Number(_self.Detail.d_start_time.seconds[1]);
            seconds--;
          } else {
            seconds = Number(_self.Detail.d_start_time.seconds);
            seconds--;
          }
          if (seconds == 00) {
            if (typeof (_self.Detail.d_start_time.minutes) != 'number') {
              minutes = Number(_self.Detail.d_start_time.minutes[1]);
              minutes--;
              seconds = 60;
            } else {
              minutes = Number(_self.Detail.d_start_time.minutes);
              minutes--;
              seconds = 60;
            }
          } else {
            minutes = Number(_self.Detail.d_start_time.minutes);
          }

          _self.Detail.d_start_time.minutes = _self.checkTime(minutes);
          _self.Detail.d_start_time.seconds = _self.checkTime(seconds);

        },
        dayToEnd: function (day) {
          var _self = this;
          var _ordertimer = null;
          var leftTime = (new Date(day)) - new Date(); //计算剩余的毫秒数
          var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
          var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
          var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
          var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
          var data = {
            hours: _self.checkTime(hours),
            minutes: _self.checkTime(minutes),
            seconds: _self.checkTime(seconds)
          };

          function go(v) {
            var date1 = new Date(),
              data2 = new Date(v);
            if (data2 < date1) {
              return false;//设置的时间小于现在时间退出
            }
          }
          return data;
        },
        apiusertreasureDetailRow: function () {
          var _self = this;
          var data = {
            d_id: getQueryVariable('id')
          };
          data = {
            values: data
          };
          postAjax(ApiUrl.apiusertreasureDetail, data, function (ret, err) {
            if (ret) {
              _self.Detail = ret.msg;
              _self.p_banner = _self.Detail.p_banner.split(',');
              _self.Detail.d_start_time = {
                hours: "",
                minutes: "",
                seconds: ""
              };
              _self.Detail.d_start_time = _self.dayToEnd(_self.Detail.d_end_time);
              _self.t1 = window.setInterval("vm.timeShow()", 1000);
              _self.$nextTick(function () {
                this.mySwiper = new Swiper('.swiper-container1', {
                  loop: true,
                  slidesPerView: "auto",
                  speed: 300,
                  autoplay: {
                    disableOnInteraction: false, //手动滑动之后不打断播放
                    delay: 2000
                  },
                  pagination: {
                    el: '.swiper-pagination'
                  },
                  on: {
                    touchStart: function (event) {
                      api.setFrameAttr({
                        name: api.frameName,
                        bounces: false
                      });
                    },
                    touchEnd: function (event) {
                      api.setFrameAttr({
                        name: api.frameName,
                        bounces: true
                      });
                    }
                  }
                });
              });
            } else {
              console.log(JSON.stringify(err));
            }
          });
        },
        winningInformationStar: function () {
          var _self = this;
          var data = {
            values: data
          };
          postAjax(ApiUrl.apiusergetgetWinInfo, data, function (ret, err) {
            if (ret) {
              for (i in ret.msg) {
                if (ret.msg[i].user_image == null) {
                  ret.msg[i].user_image = "../../image/main5/deimg.png";
                }
              }
              _self.winningInformation = ret.msg;
              _self.$nextTick(function () {
                this.mySwiper = new Swiper('.swiper-container2', {
                  loop: true,
                  slidesPerView: "auto",
                  direction: 'vertical',
                  speed: 600,
                  autoplay: {
                    disableOnInteraction: false, //手动滑动之后不打断播放
                    delay: 2000
                  },
                  pagination: {
                    el: '.swiper-pagination2'
                  }
                });
              });
            }
          });
        },
        // 分享
        share: function () {

        },
        // 判断是否结束
        isEnd: function (time1) {
          return new Date().getTime() > new Date(time1).getTime();
        }
      },
      mounted: function () {
        this.winningInformationStar();
        this.apiusertreasureDetailRow();
      }
    });
  };

  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return false;
  }

  function tz() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      var loadDateTime = new Date();
      window.setTimeout(function () {
        var timeOutDateTime = new Date();
        if (timeOutDateTime - loadDateTime < 5000) {
          window.location = 'itms-apps://itunes.apple.com/cn/app/wei/id1468418168';
        } else {
          window.close();
        }
      }, 300);
    } else {
      window.setTimeout(function () {
        window.location.href = 'https://csdl.jintianjifen.cn/zhifenbao.apk';
      }, 300);
    }
  }
</script>
</html>
